<template>
  <view class="home-container">
    <!-- 头部标题 -->
    <view class="header"> </view>

    <!-- 生活工具区域 -->
    <view class="tools-section">
      <view class="section-title">
        <text class="title-text">生活工具</text>
        <view class="title-line"></view>
      </view>
      <view class="tools-grid">
        <view class="tool-item" @click="navigateTo('/pages-sub/calendar-reward/index')">
          <image class="tool-icon" src="/static/icons/calendar.png" mode="aspectFit"></image>
          <text class="tool-name">日历奖励</text>
        </view>
        <view class="tool-item" @click="navigateTo('/pages-sub/calculator/childAllowance')">
          <image class="tool-icon" src="/static/icons/childAllowance.png" mode="aspectFit"></image>
          <text class="tool-name">育儿补贴</text>
        </view>
        <view class="tool-item" @click="navigateTo('/pages-sub/kin/index')">
          <image class="tool-icon" src="/static/icons/kin.png" mode="aspectFit"></image>
          <text class="tool-name">亲戚关系</text>
        </view>
        <view class="tool-item" @click="navigateTo('/pages-sub/remove/remove')">
          <image class="tool-icon" src="/static/icons/remove.png" mode="aspectFit"></image>
          <text class="tool-name">去水印</text>
        </view>
      </view>
    </view>

    <!-- 娱乐工具区域 -->
    <view class="tools-section">
      <view class="section-title">
        <text class="title-text">娱乐工具</text>
        <view class="title-line"></view>
      </view>
      <view class="tools-grid">
        <view class="tool-item" @click="navigateTo('/pages-sub/pindou/index')">
          <image class="tool-icon" src="/static/icons/upload.png" mode="aspectFit"></image>
          <text class="tool-name">拼豆工坊</text>
        </view>
        <view class="tool-item" @click="navigateTo('/pages-sub/mbti/index')">
          <image class="tool-icon" src="/static/icons/mbti.png" mode="aspectFit"></image>
          <text class="tool-name">MBTI测试</text>
        </view>
        <view class="tool-item" @click="navigateTo('/pages-sub/muyu/index')">
          <image class="tool-icon" src="/static/icons/muyu.png" mode="aspectFit"></image>
          <text class="tool-name">电子木鱼</text>
        </view>
      </view>
    </view>

    <!-- 底部空白区域 -->
    <view class="bottom-spacer"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 简单的导航页面，不需要复杂数据
    }
  },

  onLoad() {
    // 页面加载完成
  },

  onShow() {
    // 页面显示时
  },

  // 分享到聊天
  onShareAppMessage() {
    return {
      title: '安记录丨工具舱 - 生活娱乐好帮手',
      path: '/pages/record/index',
      imageUrl: '/static/share-img.png'
    }
  },

  // 分享到朋友圈
  onShareTimeline() {
    return {
      title: '安记录丨工具舱 - 生活娱乐好帮手',
      imageUrl: '/static/share-img.png'
    }
  },

  methods: {
    // 导航到指定页面
    navigateTo(url) {
      console.log('导航到:', url)
      uni.navigateTo({
        url: url,
        success: function (res) {
          console.log('导航成功', res)
        },
        fail: function (err) {
          console.error('导航失败:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.popup-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 12px;
}

.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 32rpx;
  display: flex;
  flex-direction: column;
}

/* 头部区域 */
.header {
  text-align: center;
  margin-bottom: 60rpx;
  padding-top: 40rpx;

  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: white;
    display: block;
    margin-bottom: 16rpx;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
  }

  .subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
    display: block;
  }
}

/* 工具区域 */
.tools-section {
  margin-bottom: 60rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;

  .title-text {
    font-size: 36rpx;
    font-weight: bold;
    color: white;
    margin-right: 20rpx;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
  }

  .title-line {
    flex: 1;
    height: 2rpx;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1));
  }
}

/* 工具网格 */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 0 8rpx;
}

.tool-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  padding: 32rpx 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  /* 添加渐变背景装饰 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8rpx;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 24rpx 24rpx 0 0;
  }

  &:active {
    transform: translateY(4rpx);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 1);
  }

  .tool-icon {
    width: 64rpx;
    height: 64rpx;
    margin-bottom: 16rpx;
    transition: transform 0.3s ease;
  }

  &:active .tool-icon {
    transform: scale(0.95);
  }

}
/* 动画效果 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}
/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16rpx;
  }

}

.action-button:active .button-icon {
  animation: pulse 0.3s ease-in-out;
}
    .tool-icon {
      width: 56rpx;
      height: 56rpx;
      margin-bottom: 12rpx;
    }


@media screen and (min-width: 751rpx) and (max-width: 900rpx) {
  .tools-grid {
    gap: 16rpx;
  }

  .tool-item {
    padding: 28rpx 12rpx;
  }
}

/* 动画效果 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tool-item {
  animation: slideInUp 0.6s ease-out;
}

</style>
